<template>
    <div class="common-layout">
        <div class="pl20 pr20">

            <div class="push-header">
                <div class="agent-photo">
                    <img :src="pushDetails.head_img" alt="" >
                </div>
                <div class="agent-name ml20">
                    <p>{{pushDetails.name}}</p>
                     <p class="mt10 light-grey">已发布数量：{{pushDetails.publish_count}}</p>
                </div>
            </div>
            <div class="push-desc mt20 fs12">
                {{pushDetails.simple_desc}}
            </div>
            <div class="push-tab mt20">
                    <div class="mt-25 fx-news-type">
                    <a href="javascript:;" v-for="m of tabList" :key="m.type" :class="[m.isActive?'isActive':'']" @click="showNewsType(m)">{{m.name}}</a>
                    </div>
                
                <template  v-for="item of pushList">
                <div class="push-content-item mt10" :key="item.id">
                    <div class="push-header">
                    <div class="agent-photo">
                        <img :src="pushDetails.head_img" alt="" >
                    </div>
                    <div class="agent-name ml20">
                        <p>{{pushDetails.name}}</p>
                        <p class="mt10 light-grey">{{item.create_time}}</p>
                    </div>
                    <div class="push-delete-btn" v-if="status!==0">
                        <el-button type="danger" size="mini" @click="deleteAgentPush(item)">删除</el-button>
                    </div>
                    </div>
                    <div class="push-desc mt10 fs12">
                    {{item.content}}
                    </div>
                     <div class="img-target mt10 fs12">
                         <template v-for="img of item.agentPushMsgImgList" >
                         <a target="_blank" :href="img.url" :key="img.id" class="">
                             <div :style="{background:'url('+img.thumbnail_url+') center center  / cover no-repeat',width:'100px',height:'100px'}"></div>
                             <!-- <img :src="img.thumbnail_url" :alt="pushDetails.name" width="100" height="100"> -->
                            </a> 
                         </template>
                    </div>
                </div>
            </template>

            <template v-if="pushList.length==0">
                <div class="p20">
                    暂无数据
                </div>
            </template>
            </div>

             <page-pagination 
                v-on:pageFun="pageFunNumber" 
                :page="page" 
                :pageSize="pageSize" 
                :total="total">
            </page-pagination>
        </div>
        
        
    </div>
</template>
<style scoped>
.push-header {
  display: flex;
  align-items: center;
}
.img-target {
  display: flex;
}
.img-target a {
  display: block;
  margin-right: 5px;
  border: 1px solid #f1f2f2;
  border-radius: 5px;
}
.push-header img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #f2f2f2;
}
.agent-name {
  flex: 1;
}
.fx-news-type .isActive {
  color: #fff;
  background: #409eff;
  border: 1px solid #409eff;
  border-bottom: 0;
}
.fx-news-type {
  border-bottom: 1px solid #ccc;
  display: flex;
}
.fx-news-type a:first-child {
  border-right: 0;
}
.fx-news-type a {
  display: block;
  color: rgb(97, 93, 93);
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: 0;
}
.push-content-item {
  width: 50%;
  border: 1px solid #f1f2f2;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 1px 5px #f9f9f9;
}
.push-content-item:hover {
  background: #fefcfc;
}
</style>
<script>
import pagePagination from "@/components/Common/pagePagination";
import server from "@/service/index_c";
export default {
  components:{
    pagePagination
  },
  data() {
    return {
      pushDetails: {},
      status: 1,
      page: 1,
      pageSize: 15,
      total: 0,
      tabList: [
        {
          isActive: true,
          name: "已发布的推送",
          type: 1
        },
        {
          isActive: false,
          name: "已删除的推送",
          type: 0
        }
      ],
      pushList: []
    };
  },
  mounted() {
    this.queryPushDetails();
  },
  watch: {
    $route: "queryPushDetails"
  },
  methods: {
    showNewsType(item) {
      for (let mm of this.tabList) {
        mm.isActive = false;
      }
      this.status = item.type;
      item.isActive = true;
      this.queryPushPageAndDetail();
    },

    async queryPushDetails() {
      let res = await server.haiheiQueryAgentByIdItem({
        id: this.$route.query.id
      });
      if (res.success) {
        this.pushDetails = res.result;
        this.queryPushPageAndDetail();
      }
    },
    async queryPushPageAndDetail(page = 1) {
      let res = await server.haiheiQueryPushPushAndDeleteAgent({
        id: this.$route.query.id,
        page: page,
        pageSize: this.pageSize,
        status: this.status
      });
      if (res.success) {
        this.pushList = res.result.pageList;
        this.total = res.result.nums;
        this.pageSize = res.result.pageSize;
        this.page = res.result.page;
      }
    },
    pageFunNumber(page) {
      this.queryPushPageAndDetail(page);
    },
    deleteAgentPush(item) {
      this.$confirm(`您确定要删除该经纪商的的推送吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      })
        .then(() => {
          server
            .haiheiQueryPushDeleteAgent({
              id: item.id,
              status: 0
            })
            .then(res => {
              if (res.success) {
                this.queryPushPageAndDetail();
              }
            });
        })
        .catch(e => {});
    }
  }
};
</script>

